#@ucenter_layout()

#define script()
<script src="#(CPATH)/static/components/jcrop/js/jquery.jcrop.min.js"></script>
<script src="#(CPATH)/static/components/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="#(CPATH)/static/components/jquery-file-upload/js/jquery.iframe-transport.js"></script>
<script src="#(CPATH)/static/components/jquery-file-upload/js/jquery.fileupload.js"></script>
<script>

    var jcrop_api;
    $('#cfile').fileupload({
        dropZone: $('#uploader'),
        url: '#(CPATH)/commons/attachment/upload',
        sequentialUploads: true,
        done: function (e, data) {
            if (data.result.state == "ok") {
                if (jcrop_api) {
                    jcrop_api.destroy()
                }
                var src = data.result.src;
                $("#path").val(src);
                $("#avatarimg").attr("src", "#(CPATH)" + src);
                $('#avatarimg').Jcrop({
                    setSelect: [30, 30, 250, 250],
                    minSize: [50, 50],
                    aspectRatio: 1,
                    onSelect: updateSelect,
                    onChange: updateSelect
                }, function () {
                    jcrop_api = this;
                });
            }
        }
    });

    function updateSelect(c) {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    }

    function submitSuccess() {
        toastr.options.onHidden = function () {
            location.reload();
        }
        toastr.success('头像修改成功，2s后自动刷新...');
    }

</script>
#end

#define css()
<link rel="stylesheet" href="#(CPATH)/static/components/jcrop/css/jquery.jcrop.min.css" rel="stylesheet">
<link rel="stylesheet" href="#(CPATH)/static/components/jquery-file-upload/css/jquery.fileupload.css">

<style>

</style>
#end
#define content()

<section class="content">

    <div class="container-fluid">
        <div class="card card-outline card-primary">

            <form class=" autoAjaxSubmit" autocomplete="off" action="#(CPATH)/ucenter/doSaveAvatar"
                  method="post"
                  data-ok-function="submitSuccess"
            >
                <input type="hidden" name="path" id="path">
                <input type="hidden" name="x" id="x">
                <input type="hidden" name="y" id="y">
                <input type="hidden" name="w" id="w">
                <input type="hidden" name="h" id="h">
                <input type="hidden" name="uid" value="#(user.id)">
                <div class="card-body">
                    <div id="uploader">
                                <span class="btn btn-block btn-primary fileinput-button" style="width: 160px">
                                    <i class="fas fa-plus"></i>
                                    <span>选择图片...</span>
                                    <input id="cfile" type="file" name="files[]" multiple>
                                </span>
                    </div>
                    <div class="text-center" style="margin-bottom: 20px">
                        <div style="margin: 10px 0">
                            <img src="#(CPATH)/static/commons/img/avatar.png" style="max-width: 100%;height: 100%"
                                 id="avatarimg">
                        </div>
                    </div>
                </div>

                <div class="card-footer">
                    <div class="col-sm-10 submit-block">
                        <div class="card-submit">
                            <button type="submit" class="btn btn-primary"> 保存选择区域</button>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>

    </div>

</section>
#end
